// 用来封装全局指令

// 导入默认的图片
import defaultImg from '@/assets/images/200.png'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  // 定义插件
  install(app) {
    // 自定义指令
    app.directive('imgLazy', {
      mounted(el, binding) {
        // 图片加载不出来的默认图片
        el.src = defaultImg
        // 数据可视区域检测
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            stop()
            el.src = binding.value
          }
        }, { threshold: 0.1 })
      }
    })
  }
}
